﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <style>
        .statusItem {
            display: inline-block;
            padding: 5px;
            padding: 5px;
            text-align: center;
            
            border-radius:5px;
        }
        .statusItem .icom{
            font-size:24px;
            display:block;
        }
        .statusItem.finished{
            color:#bd0303;
            border:0px solid #ff6a00;
        }
        .statusItem.current{
            color:#ff0000;
            border:0px solid #ff0000;
        }
        .statusItem.future{
            color:#c5c4c4;
             border:0px solid #c5c4c4;
        }
        .statusItem .title{
            font-size:12px;
            display:block;
        }
        .limeSplit {
            border-top: 1px solid #ddd;
            height: 18px;
            width: 60px;
            display: inline-block;
        }
        .k_status_hide{display:none;}
        #InApproveProcess{
            display:none;
        }
        #InSubmitProcess{ 
            display:none;
            padding: 20px;
            border: 0px solid #d6d4d4;
            border-radius: 3px;
            background-color: #fff;
            text-align: center;
            font-size: 30px;
            color: #757373;
        }
        #K_WorkflowState{color:#f00;}
    </style>
    <div id="workflowDiv" style="border:0px solid #ddd;display:none;margin:5px;">
        <div id="InApproveProcess">
            <div class="statusItem finished">
                <span class="glyphicon glyphicon-ok-circle icom "></span>
                <span>Submit</span>
            </div>
            <div class="limeSplit">
            </div>
            <div class="statusItem {{K_Class_State1}} {{k_display1}}">
                <span class="glyphicon {{K_Class1}} icom "></span>
                <span>{{L1Approve}}</span>
            </div>
            <div class="limeSplit {{k_display1}}">
            </div>
            <div class="statusItem {{K_Class_State2}} {{k_display2}}">
                <span class="glyphicon {{K_Class2}} icom "></span>
                <span>{{L2Approve}}</span>
            </div>
            <div class="limeSplit {{k_display2}}">
            </div>
            <div class="statusItem {{K_Class_State3}} {{k_display3}}">
                <span class="glyphicon {{K_Class3}} icom "></span>
                <span>{{L3Approve}}</span>
            </div>
            <div class="limeSplit {{k_display3}}">
            </div>
            <div class="statusItem {{K_Class_State4}} {{k_display4}}">
                <span class="glyphicon {{K_Class4}} icom "></span>
                <span>{{L4Approve}}</span>
            </div>
            <div class="limeSplit {{k_display4}}">
            </div>
            <div class="statusItem {{K_Class_State_publish}}">
                <span class="glyphicon {{K_Class_publish}} icom "></span>
                <span>Published</span>
            </div>
            <div class="statusItem pull-right" style="padding-top:15px">
                <button class="btn btn-danger" id="ApproveBtn" style="display: none;">Approve</button>
                <button class="btn btn-default" id="RejectBtn" style="display: none;">Reject</button>                
            </div>
        </div>
        <div id="InSubmitProcess">
            <div>
                <span class="glyphicon glyphicon-flag" style="color: #FF9800;font-size: 26px;"></span>
                The workflow state of document is <span id="K_WorkflowState">Draft</span>
                <button class="btn btn-danger pull-right" id="ReEditBtn" style="display: none;">ReEdit</button>
                <button class="btn btn-danger pull-right" id="SubmitBtn" style="display: none;">Submit</button>
            </div>
        </div>
    </div>
        
</body>
</html>